<template>
    <div class="home-container">
        <header class="header">
            <div class="logo-container">
                <div class="logo-Image"><img src="../assets/Picture/Home/log.png" alt="log"></div>
                <div class="logo-text">
                    <h5>山东中医药大学智能标注平台</h5>
                </div>
            </div>
            <nav class="nav-info">
                <div class="nav-item">
                    <img src="../assets/Picture/Home/doucument.png" alt=" ">
                    <div class="nav-doc">{{ navText }}</div>
                </div>
            </nav>
            <div class="user-info">
                <el-tooltip content="个人信息" placement="top">
                    <img src="../assets/Picture/Home/user.png" alt="个人信息" class="user-image" @click="showUserInfo">
                </el-tooltip>
                <el-tooltip content="登出账号" placement="top">
                    <img src="../assets/Picture/Home/out.png" alt="登出" class="out-image" @click="logout">
                </el-tooltip>
            </div>
        </header>
        <router-view />
    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox, ElTooltip } from 'element-plus'
// import  ProjectManagement  from "@/views/ProjectManagement.vue";
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'

const router = useRouter()
const route = useRoute()

const showUserInfo = () => {
    const userEmail = localStorage.getItem('userEmail');
    if (!userEmail) {
        ElMessageBox.confirm('未登录，请重新登录', '提示', {
            confirmButtonText: '返回登录',
            showCancelButton: false,
            type: 'warning'
        }).then(() => {
            router.push({ name: 'login' });
        });
    } else {
        ElMessageBox.alert(`您的邮箱是: ${userEmail}`, '个人信息', {
            confirmButtonText: '确定'
        });
    }
}
const logout = () => {
    router.push({ name: 'login' })
    ElMessage.success('账号已登出')
}

ElMessage.success('欢迎回来！')

// 动态设置导航栏文本
const navText = computed(() => {
    if (route.name === 'DocumentManagement') {
        return '文档管理'
    } else {
        return '项目管理'
    }
})
</script>

<style scoped>
*,
*:before,
*:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

div {
    display: block;
    unicode-bidi: isolate;
}

body {
    min-height: 100vh;
    color: #262626;
    background: #f6f6f6;
    transition: color .5s, background-color .5s;
    padding: 0;
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.home-container {
    text-align: center;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    min-height: 80px;
}

.header {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    box-shadow: 0 1px 3px #1212121a;
    font-size: 14px;
    color: #262626;
    -webkit-user-select: none;
    user-select: none;
}

.logo-container {

    display: flex;
    align-items: center;
    padding-left: 10px;
}

.logo-container img {

    height: 50px;
    width: 50px;
    object-fit: contain;
    padding: 8px;
    /* 添加间距 */
}

.logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    /* 更改颜色 */
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
    /* 过渡效果 */
}

.logo-text:hover {
    color: #007bff;
}

.nav-item {
    display: flex;
    justify-content: center;
    align-items: center;

}

.nav-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;

}

.nav-doc {
    margin: 10px;
    margin-right: 20px;
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 18px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗 */
    color: #333333;
    /* 字体颜色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
    /* 过渡效果 */
}

.nav-doc:hover {
    color: #007bff;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    padding: 8px;
}

.out-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    padding: 8px;
    margin-right: 20px;
}

.nav-link {
    font-family: 'Arial', sans-serif;
    /* 字体系列 */
    font-size: 18px;
    /* 字体大小 */
    font-weight: bold;
    /* 加粗 */
    color: #333333;
    /* 字体颜色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    /* 阴影效果 */
    text-decoration: none;
    /* 去掉下划线 */
    transition: color 0.3s ease;
    /* 过渡效果 */
}

.nav-link:hover {
    color: #007BFF;
    /* 鼠标悬停时的颜色 */
}
</style>
